<template>
  <div class="examResultsBody">
    <div class="box" v-loading="loading">
      <!-- 状态       noBox 未通过 -->
      <div v-show="!loading">
        <div
          :class="examInfo.result === '已通过' ? 'stampBox' : 'stampBox noBox'"
          v-show="examInfo.result !== '待阅卷'"
        >
          <div class="stamp">{{ examInfo.result }}</div>
        </div>
      </div>

      <div class="title">
        <el-page-header :content="examInfo.title" @back="goBack" />
      </div>
      <div class="time">
        <span
          >用时:
          {{
            calculateDiffTime(
              Number(new Date(examInfo.studentStartTime)),
              Number(new Date(examInfo.stuEndTime))
            ).day*24*60+calculateDiffTime(
              Number(new Date(examInfo.studentStartTime)),
              Number(new Date(examInfo.stuEndTime))
            ).hour*60+calculateDiffTime(
              Number(new Date(examInfo.studentStartTime)),
              Number(new Date(examInfo.stuEndTime))
            ).minute
          }}分钟</span
        >
        <div class="solid"></div>
        <span>交卷时间: {{ examInfo.stuEndTime }}</span>
        <div class="solid"></div>
        <span>试卷总分: {{ examInfo.scores }}</span>
        <div class="solid"></div>
        <span>通过分数: {{ examInfo.pastscores }}</span>
      </div>
      <div class="examNum">
        <!-- passNum通过    noPassNum未通过-->
        <span
          v-show="examInfo.result !== '待阅卷'"
          :class="examInfo.result === '已通过' ? 'passNum' : 'noPassNum'"
          >{{ examInfo.studentScores }}</span
        >
        <span class="numTitle" v-if="!loading" v-show="examInfo.result === '已通过'"
          >恭喜，通过考试</span
        >
        <span class="numTitle" v-show="examInfo.result === '未通过'"
          >很可惜，未通过</span
        >
        <span class="load" v-show="examInfo.result === '待阅卷'">{{
          examInfo.result
        }}</span>
      </div>
      <table>
        <tr style="background-color: #fbfcfc; height: 40px">
          <td></td>
          <td>单选题{{ radioNum === 0 ? "" : "(" + radioNum + ")" }}</td>
          <td>多选题{{ checkNum === 0 ? "" : "(" + checkNum + ")" }}</td>
          <td>判断题{{ isNum === 0 ? "" : "(" + isNum + ")" }}</td>
          <td>填空题{{ fillNum === 0 ? "" : "(" + fillNum + ")" }}</td>
          <td>问答题{{ qadNum === 0 ? "" : "(" + qadNum + ")" }}</td>
        </tr>
        <tr>
          <td>正确数</td>
          <td>{{radioNumCorrect===0?'--':radioNumCorrect+' 题'}}</td>
          <td>{{checkNumCorrect===0?'--':checkNumCorrect+' 题'}}</td>
          <td>{{isNumCorrect===0?'--':isNumCorrect+' 题'}}</td>
          <td v-show="examInfo.result === '待阅卷'" rowspan="2" style="color:red">等待阅卷</td>
          <td v-show="examInfo.result === '待阅卷'" rowspan="2" style="color:red">等待阅卷</td>
          <td v-show="examInfo.result !== '待阅卷'">{{fillNumCorrect===0?'--':fillNumCorrect+' 题'}}</td>
          <td v-show="examInfo.result !== '待阅卷'">{{qadNumCorrect===0?'--':qadNumCorrect+' 题'}}</td>
        </tr>
        <tr>
          <td>错误数</td>
          <td>{{radioNum-radioNumCorrect===0?'--':radioNum-radioNumCorrect+' 题'}}</td>
          <td>{{checkNum-checkNumCorrect===0?'--':checkNum-checkNumCorrect+' 题'}}</td>
          <td>{{isNum-isNumCorrect===0?'--':isNum-isNumCorrect+' 题'}}</td>
          <td v-show="examInfo.result !== '待阅卷'">{{fillNum-fillNumCorrect===0?'--':fillNum-fillNumCorrect+' 题'}}</td>
          <td v-show="examInfo.result !== '待阅卷'">{{qadNum-qadNumCorrect===0?'--':qadNum-qadNumCorrect+' 题'}}</td>
        </tr>
      </table>
      <div class="but" v-show="!loading" :style="examInfo.result === '待阅卷'?'padding:20px 0':''">
        <!-- noBut未通过 -->
        <el-button
          type="success"
          :class="examInfo.result === '已通过' ? '' : 'noBut'"
          @click="startExam"
          v-show="examInfo.result !== '待阅卷'"
          >查看答卷</el-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getForResult } from "../../apis/stutest/stutest";
import { ElTable, ElMessage } from "element-plus";
import { calculateDiffTime } from "../../utils/processingTime";
const router = useRouter();
const route = useRoute();
const data = reactive({
  testid: 0,
  examInfo: {
    title: "",
    pastscores: "",
    stuEndTime: "",
    scores: "",
    studentStartTime: "",
    studentScores: "",
    result: "已通过",
  },
  loading: true,
  // 单选数量
  radioNum: 0,
  // 单选答对的数量
  radioNumCorrect: 0,
  // 多选数量
  checkNum: 0,
  // 多选答对的数量
  checkNumCorrect: 0,
  // 判断题数量
  isNum: 0,
  // 判断题答对的数量
  isNumCorrect: 0,
  // 问答题数量
  qadNum: 0,
  // 问答题答对的数量
  qadNumCorrect: 0,
  // 填空题数量
  fillNum: 0,
  // 填空题答对的数量
  fillNumCorrect: 0,
});
const {
  testid,
  examInfo,
  loading,
  radioNum,
  radioNumCorrect,
  checkNum,
  checkNumCorrect,
  isNumCorrect,
  isNum,
  qadNumCorrect,
  qadNum,
  fillNumCorrect,
  fillNum,
} = toRefs(data);
// 接受传过来的参数
data.testid = Number(route.query.id);

// 请求学生考试结果数据
const forResult = async () => {
  data.loading = true;
  const res: any = await getForResult(testid.value);
  if (res.errCode === 10000) {
    data.examInfo = res.data;
    data.loading = false;
    // 处理不同类型题的数量
    res.data.questions.forEach((item: any, index: number) => {
      if (item.type === "单选题") {
        data.radioNum = data.radioNum + 1;
        if (item.studentscores > 0) {
          data.radioNumCorrect = data.radioNumCorrect + 1;
        }
      }
      if (item.type === "多选题") {
        data.checkNum = data.checkNum + 1;
        if (item.studentscores > 0) {
          data.checkNumCorrect = data.checkNumCorrect + 1;
        }
      }
      if (item.type === "判断题") {
        data.isNum = data.isNum + 1;
        if (item.studentscores > 0) {
          data.isNumCorrect = data.isNumCorrect + 1;
        }
      }
      if (item.type === "问答题") {
        data.qadNum = data.qadNum + 1;
        if (item.studentscores > 0) {
          data.qadNumCorrect = data.qadNumCorrect + 1;
        }
      }
      if (item.type === "填空题") {
        data.fillNum = data.fillNum + 1;
        if (item.studentscores > 0) {
          data.fillNumCorrect = data.fillNumCorrect + 1;
        }
      }
    });
  } else {
    ElMessage.error(res.errMsg);
    data.loading = false;
  }
};
// 点击阅卷
const startExam=()=>{
    router.push({name:'stuexamwrong',query:{testid:data.testid}})
}
onMounted(() => {
  forResult();
});
// 点击返回
const goBack = () => {
  router.push("stutest");
};
</script>

<style lang="less" scoped>
@import url("../../static/css/stutest/examResults.css");
</style>
